Flutter / GetX Steps / Step4: Working with controller
Working with controller
-
Steps
1. create controller with minimal code
controllers/login_controller.dart
import 'package:flutter/cupertino.dart'; import 'package:get/get.dart'; class LoginController extends GetxController { @override void onInit() { super.onInit(); } @override void onReady() {} @override void onClose() {} } 2. variables in controller
variable declaration
class LoginController extends GetxController { final count = 0; final newCount=0; .... .... } complete code
class LoginController extends GetxController { final count = 0; final newCount=0; @override void onInit() { super.onInit(); } @override void onReady() {} @override void onClose() {} } 1. Update(): Using this, widgets can listen to the changes made by the methods defined in controller. It is similar to notifyListeners in providers
2. onInit(): It is called immediately after the widget is allocated memory.
3. onReady(): It is called immediately after the widget is rendered on screen.
4. onClose(): It is called just before the controller is deleted from memory.observable variables
final name = ''.obs; final isLogged = false.obs; final count = 0.obs; final balance = 0.0.obs; final number = 0.obs; 3. access variable in view
1. import login_controller.dart in view page screens/login.dart
import 'package:getx_restaurant/controllers/login_controller.dart'; 2. add dependency injection for access the controller
LoginController logincontroller = Get.put(LoginController()); 3. access the variable in controller
complete codelogincontroller.name import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:getx_restaurant/controllers/login_controller.dart'; //1. added new line class LoginScreen extends StatelessWidget { LoginScreen({Key? key}) : super(key: key); LoginController logincontroller = Get.put(LoginController()); //2. added new line @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, appBar: AppBar(title: const Text("My App Title")), body: SafeArea( child: Column( children: [ Container( padding: EdgeInsets.all(15), child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Username', hintText: 'Enter Username', ), ), ), Padding( padding: EdgeInsets.all(15), child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', hintText: 'Enter Password', ), ), ), ElevatedButton( onPressed: () { Get.to(()=>RegisterScreen()); }, child: Text(logincontroller.name), //3. added new line ), Row( children: [ SizedBox(width: 50), Expanded( child:ElevatedButton( onPressed: () { }, child: Text('New Account'), ), ), SizedBox(width: 50), Expanded( child:ElevatedButton( onPressed: () { }, child: Text('New Account'), ), ), SizedBox(width: 50), ] ) ] ) ), ), ); } } 4. methods in controller
function definition
... List todoItems = []; ..... void addTodo() { int index = todoItems.length; todoItems.add('Item' + index.toString()); /** Notify changes in method, variables to the views **/ update(); } function call from view
onPressed: () { logincontroller.addTodo(); }, 5. Observable variable
Observable Variable declaration in controller
final followerCount = 0.obs; access Observable variable from view
body: Container( child: Obx(() => Center(child: Text(logincontroller.count.toString()))), ), We can use inside the container(), row(), column(), padding() etc 6. Inputbox variable
variable declaration
final storeNameEditingController = TextEditingController(); final reviewEditingController = TextEditingController(); final followerController = TextEditingController(); final reviewNameController = TextEditingController(); access from view
Container( padding: EdgeInsets.all(15), child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Username', hintText: 'Enter Username', controller: logincontroller.storeNameEditingController, ), ), ),